<template>

	<div class="container">
		<div style="background:url(http://lak110.gitee.io/gdapp/src/images/mybg.jpeg);background-size:cover;">
			<div class="status-top"></div>
		</div>
		<ul class="tips-con flexLeft">
			<li class="tips-item">
				<div style="font-size: 0.68rem;color: #0078D7;">{{alreadyDone}}</div>
				<div class="" style="line-height: 1;">
					<span class="iconfont icon-yanzhengma" style="color: #0078D7;font-size: 0.85rem;"></span>
					<span style="color: #869AA3;font-size: 0.68rem;">已处理</span>
				</div>
			</li>
			<div style="width: 1px;height: 1.27rem;background: #869AA3;"></div>
			<li class="tips-item">
				<div style="font-size: 0.68rem;color: #ED1709;">{{notDone}}</div>
				<div class="" style="line-height: 1;">
					<span class="iconfont icon-cuowu" style="color: #869AA3;font-size: 0.68rem"></span>
					<span style="color: #869AA3;font-size: 0.68rem;">未处理</span>
				</div>
			</li>
		</ul>
		<ul class="list-con">
			<li class="list-item flexBetween" v-for="item in funArr" @click="goPage(item.goPageUrl)">
				<div>
					<span class="iconfont" :class="item.icon"></span>
					<span class="list-txt">{{item.funName}}</span>
				</div>
				<span class="iconfont icon-xuanzeqixiayige"></span>
			</li>
		</ul>
		<foot-guide></foot-guide>
	</div>



	<!-- 	<div class="my-container">
		<div @click="goPage(item.goPageUrl)" class="fun-item flexCenter" v-for="item in funArr" :style="{background: 'url('+item.imgUrl+')'}">
			<div class="nav-title">{{item.funName}}</div>
		</div>
		<div class="bottom-placehoder"></div>
		<foot-guide></foot-guide>
	</div> -->
</template>

<script>
	import footGuide from 'src/components/footer/footGuide'
	export default {
		components: {
			footGuide
		},
		data() {
			return {
				funArr: [{
						funName: '电费缴纳',
						imgUrl: 'https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg',
						icon:'icon-jifen1'
					},
					{
						funName: '电量电费查询',
						imgUrl: 'https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg',
						goPageUrl: '/company',
						icon:'icon-sousuo'
					},
					{
						funName: '修改密码',
						imgUrl: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
						goPageUrl: '/changePwd',
						icon:'icon-icon_xiugaimima'
					},
					{
						funName: '退出登陆',
						imgUrl: 'https://image.weilanwl.com/color2.0/plugin/qpct2148.jpg',
						icon:'icon-shouye2',
						goPageUrl: '/login'
					}
				],
        alreadyDone:0,
        notDone:0

			}
		},
		methods: {
			goPage(url) {
				this.$router.push({
					path: url
				})
			},
      selectMeterMaintain(status) {
      	this.$axios.post('gdiot/meter/selectMeterMaintain', {
      		"page": "1",
      		"rows": "1000000",
      		"status": status
      	}).then((p) => {
          console.log(p)
          if(status){
             this.alreadyDone = p.data.result.rows.length;
          }else{
             this.notDone = p.data.result.rows.length;

          }

      	})
      },

		},
		created() {
      this.selectMeterMaintain(0);
      this.selectMeterMaintain(1);

		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.container{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: #F6F6F6;
	}
	.status-top {
		height: 9rem;
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url(http://lak110.gitee.io/gdapp/src/images/wave.gif);
		mix-blend-mode: soft-light;
		vertical-align: middle;
	}

	.tips-con {
		box-shadow: 0 0 10px #869AA3;
		padding-bottom: 10px;
		padding-top: 10px;
		background: white;
		margin-bottom: 0.85rem;
	}

	.tips-item {
		flex: 1;
		text-align: center;
	}

	.list-con {
		margin: 10px;
		background: white;
		border-radius: 0.42rem;
		.list-txt {
			font-size: 0.68rem;
			color: #869AA3;
		}
		.list-item{
			padding:8px 10px;
			border-bottom: 1px solid #F6F6F6;
			>div .iconfont{
				font-size: 20px;
			}
		}

		.iconfont {
			color: #869AA3;
		}
	}



	// --------------------------------------------------------ll


	.my-container {
		padding: 0.63rem;
	}

	.fun-item {
		margin-bottom: 0.63rem;
		position: relative;
		height: 5.4rem;
		background-size: 100% 100% !important;
		border-radius: 5px;
		animation: show-car .5s;
		transition: left .6s, top .6s;
		transition-delay: 1s;

		.nav-title {
			width: 90%;
			font-size: 0.85rem;
			color: white;
		}

		.nav-title:after {
			content: "";
			width: 2rem;
			height: 3px;
			border-radius: 10px;
			background-color: #fff;
			display: block;
			margin-top: 0.6rem;
		}
	}

	@keyframes show-car {
		0% {
			transform: scale(.3);
		}

		100% {
			transform: scale(1);
		}

	}
</style>
